<template>
    <div class="video">
        <div class="header"></div>
        <div class="main">
            <div class="resources">
                <div>
                    <span style="font-size: 150%;">{{ video.title }}</span>
                </div>
                <div style="margin-bottom: 20px;height: 16.8px;">
                    <span style="font-size: 80%;color: #606266;margin-left: 20px;vertical-align: top;">{{ video.createTime }}</span>
                    <span style="font-size: 80%;color: #606266;margin-left: 30px;vertical-align: top;">未经作者授权，禁止转载</span>
                </div>
                <div style="margin-bottom: 20px;">
                    <iframe style="height: 405px;width: 100%;" :src="video.resource" scrolling="no"
                        frameborder="no" v-if="!isvideo"></iframe>
                    <video
                    style="height: 405px;width: 100%;" 
                    controls
                    autoplay
                    :src="video.resource"
                    v-if="isvideo"
                    >
                    </video>
                </div>
                <div>
                    <span class="iconfont" v-if="!user_like" @click="userLike()">&#xe62a;&nbsp;<span
                            style="font-size: 70%;">{{ like }}</span></span>
                    <span class="iconfont" style="color: #409EFF;" v-if="user_like"
                        @click="userLike()">&#xe603;&nbsp;<span style="font-size: 70%;">{{ like }}</span></span>
                    <i class="el-icon-star-off icon" @click="usercollect" v-if="!user_collect"><span class="i">{{
                        collect }}</span></i>
                    <i class="el-icon-star-on icon" @click="usercollect" v-if="user_collect"
                        style="color: #409EFF;"><span class="i">{{ collect }}</span></i>
                </div>
                <el-divider></el-divider>
                <div>
                    <span class="introduction" id="introduction">{{ video.introduction }}</span>
                </div>
                <div style="margin-bottom: 10px;">
                    <el-button type="text" style="color: #606266;font-size: 80%;" @click="Expand_More_video" v-if="!expand1">展开更多</el-button>
                </div>
                <div>
                    <el-button size="mini" round>{{ video.classification }}</el-button>
                </div>
                <el-divider></el-divider>
                <div>
                    <span style="font-size: 140%;">评论<span style="font-size: 80%;margin-left: 10px;">{{ comment_length
                    }}</span></span>
                </div>
                <div style="margin-left: 10px;margin-top: 20px;height: 50px;">
                    <el-avatar :size="50">
                        <img :src="user.avatarUrl" referrerPolicy="no-referrer">
                    </el-avatar>
                    <el-input v-model="comment_input" placeholder="请输入评论..."
                        style="width: 500px;margin-left: 20px;vertical-align:top;margin-top: 5px;"></el-input>
                    <el-button type="primary" plain @click="Post_comments"
                        style="vertical-align: top;margin-top: 5px;margin-left: 15px;">发布</el-button>
                </div>
                <div v-for="(item,index) in comment" :key="item.id">
                    <div class="comment_user" @click="jump_blank('friend_person',item.uid)">
                        <el-avatar :size="50">
                            <img :src="item.avatarUrl" referrerPolicy="no-referrer">
                        </el-avatar>
                    </div>
                    <div class="comment_text">
                        <span style="color: #e63c8e;font-size: 90%;cursor: pointer;" @click="jump_blank('friend_person',item.uid)">{{ item.name }}</span>
                        <div style="margin-top: 10px;">
                            <span style="font-size: 85%;">{{ item.userComment }}</span>
                        </div>
                        <div style="margin-top: 1px;">
                            <span style="font-size: 80%;color: #909399;">{{ item.createTime }}</span>
                            <span style="font-size: 80%;color: #909399;margin-left: 20px;cursor: pointer;" @click="Reply_to_comments(item,index,null)">回复</span>
                            <span style="font-size: 80%;color: #909399;margin-left: 20px;cursor: pointer;"
                                v-if="getsession_id == item.uid" @click="Delete_Comment(item.id,index)">删除</span>
                        </div>
                        <div v-for="(item1,index1) in item.twoCommentVOList" style="margin-top: 20px;" v-if="index1<2||expand2">
                            <div @click="jump_blank('friend_person',item1.uid)" style="display:inline-block;">
                                <el-avatar :size="30" style="cursor: pointer;">
                                    <img :src="item1.avatarUrl" referrerPolicy="no-referrer">
                                </el-avatar>
                            </div>
                            <div
                                style="display:inline-block;vertical-align: top;margin-top: 5px;width: 80%;padding-left: 10px;">
                                <span style="font-size: 80%;color: #606266;">{{ item1.name }}</span>
                                <span v-if="item1.username != null" style="font-size: 80%;margin-left: 5px;">回复<span
                                        style="margin-left: 5px;color: #606266;">{{ item1.username }}</span></span>
                                <span style="margin-left: 7px;margin-right:8px">:</span>
                                <span style="font-size:85%;">{{ item1.userComment }}</span>
                                <div>
                                    <span style="font-size: 80%;color: #909399;">{{ item1.createTime }}</span>
                                    <span style="font-size: 80%;color: #909399;margin-left: 20px;cursor: pointer;"  @click="Reply_to_comments(item,index,item1)">回复</span>
                                    <span style="font-size: 80%;color: #909399;margin-left: 20px;cursor: pointer;"
                                        v-if="getsession_id == item1.uid" @click="Delete_Comment_2(item1.id,index,index1)">删除</span>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 10px;" v-if="item.twoCommentVOList!=null&&item.twoCommentVOList.length > 2">
                            <span style="font-size: 80%;color: #909399;cursor: pointer;" @click="Get_comment2">共{{ item.twoCommentVOList.length }}条回复，点击查看</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recommend">
                <el-dropdown placement="bottom">
                    <div style="height: 50px;width:50px;display: inline-block;cursor: pointer;" @click="jump_blank('friend_person',video.publisherId)">
                        <el-avatar :size="50">
                            <img :src="video.publisherAvatarUrl" referrerPolicy="no-referrer">
                        </el-avatar>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <div class="drop-down">
                            <div class="drop-header"></div>
                            <div style="padding: 10px;">
                                <div style="height: 50px;width:50px;display: inline-block;cursor: pointer;vertical-align: top;" @click="jump_blank('friend_person',video.publisherId)">
                                    <el-avatar :size="50">
                                        <img :src="video.publisherAvatarUrl" referrerPolicy="no-referrer">
                                    </el-avatar>
                                </div>
                                <div style="display:inline-block;margin-left: 30px;">
                                    <span class="upname" @click="jump_blank('friend_person',video.publisherId)">{{ video.publisherName }}</span>
                                    <div style="margin-top: 5px;">
                                        <span style="font-size: 80%;color:#909399">{{ follow }}关注</span>
                                        <span style="font-size: 80%;color:#909399;margin-left: 10px;">{{ fans }}粉丝</span>
                                    </div>
                                    <div style="margin-top: 5px;">
                                        <span class="up-introduction">{{ video.publisherIntroduction }}</span>
                                    </div>
                                    <div style="margin-top: 10px;">
                                        <el-button size="mini" type="primary" v-if="!user_follow&&getsession_id!=video.publisherId" @click="follow_up">关注</el-button>
                                        <el-button size="mini" type="primary" v-if="user_follow&&getsession_id!=video.publisherId" @click="follow_up">取关</el-button>
                                        <el-button size="mini" type="primary" v-if="getsession_id==video.publisherId" @click="jump('/person','_self')">个人中心</el-button>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>
                <div style="display:inline-block;vertical-align: top;margin-left: 30px;">
                    <span class="upname" @click="jump_blank('friend_person',video.publisherId)">{{ video.publisherName }}</span>
                    <div style="margin-top: 10px;">
                        <el-button size="mini" type="primary" v-if="!user_follow&&getsession_id!=video.publisherId" @click="follow_up">关注</el-button>
                        <el-button size="mini" type="primary" v-if="user_follow&&getsession_id!=video.publisherId" @click="follow_up">取关</el-button>
                        <el-button size="mini" type="primary" v-if="getsession_id==video.publisherId" @click="jump('/person','_self')">个人中心</el-button>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <div style="margin-bottom: 20px;"><span>推荐列表</span></div>
                    <div v-for="item in recommend" :key="item.id" style="margin-bottom: 10px;">
                        <el-image style="width: 150px; height: 90px;border-radius: 10px;cursor: pointer;" :src="item.cover" @click="router_video(item.id)"
                            referrerPolicy='no-referrer' fit="fill"></el-image>
                        <div style="display:inline-block;width: 50%;margin-left: 10px;">
                            <div class="recommendname">
                                <span class="span" @click="router_video(item.id)">{{ item.title }}</span>
                            </div>
                            <div style="font-size: 80%;color: #606266;">
                                <i class="el-icon-user"></i> {{ item.publisherName }} · {{ item.createTime.slice(0,10) }}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    // name:'Video',
    data() {
        return {
            user: {//用户
                // id: 0,//id
                // avatarUrl: '',//用户头像
                // name:'',//用户姓名
            },
            user_like: false,//用户是否点赞
            user_collect: false,//用户是否收藏
            user_follow:false,//用户是否关注up
            follow: 0,//关注数
            fans: 0,//粉丝数
            video: {//视频信息
                // id: 0,//id
                // title: '',//视频名称
                // introduction: '',//视频简介
                // resource: '',//视频地址
                // classification: '',//视频分类
                // createTime: '',//视频发布时间
            },
            like: 0,//点赞数
            collect: 0,//收藏数
            comment: [//评论
                // {
                //     id:0,//id
                //     uid:0,//评论用户id
                //     name:'',//评论用户名称
                //     createTime:'',//评论时间
                //     userComment:'',//评论内容
                //     avatarUrl:'',//评论用户头像
                //     twoCommentVOList:[//二级评论
                //         {
                //             id:0,//id
                //             uid:0,//评论用户id
                //             username:0,//回复用户名称
                //             name:'',//评论用户名称
                //             createTime:'',//评论时间
                //             userComment:'',//评论内容
                //             avatarUrl:'',//评论用户头像
                //         }
                //     ],
                // }
            ],
            recommend: [//根据视频类别推荐视频
                // {
                //     id:0,//视频id
                //     name:'',//视频名称
                //     cover:'',//封面地址
                //     upname:'',//发布者名称
                //     time:'',//发布时间
                // }
            ],
            page: 1,//下拉页数
            comment_input: '',//发表评论内容
            expand1:false,//是否展开
            expand2:false,//评论是否展开
            follow_button:'关注',//关注按钮文本
            isvideo:true,//是否是用户上传视频
        }
    },
    computed: {
        //评论总个数comment1
        comment_length() {
            var a = 0
            this.comment.forEach(function (item, index) {
                if(item.twoCommentVOList)
                    a = a + item.twoCommentVOList.length
            })
            return this.comment.length + a
        },
        //获取session的id值
        getsession_id() {
            return sessionStorage.getItem('id')
        }
    },
    methods: {
        //_blank跳转
        jump_blank(url_name,id){
            var {href} = this.$router.resolve({
                name:url_name,
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //跳转到视频页面
        router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //跳转页面
        jump(url,target){
            if(target=='_blank'){
                var {href} = this.$router.resolve(url);
                window.open(href,"_blank");
            }else if(target=='_self'){
                this.$router.push(url)
            }
        },
        //关注up
        follow_up(){
            var _this =this
            var data ={
                uid:_this.user.id,
                fid:_this.video.publisherId
            }
            PersonalCenterApi.SubmitFollow(data).then(res=>{
                this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success'
                }); 
                _this.user_follow = !_this.user_follow
            })
        },
        //查看剩余二级评论
        Get_comment2(){
            this.expand2 = !this.expand2
        },
        //删除二级评论
        Delete_Comment_2(id,index,index1){
            var _this = this
            var comment = {
                id:id
            }
            PersonalCenterApi.SubmitDeleteComment(comment).then(res=>{
                if(res.data.code == 200){
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'success'
                    }); 
                    _this.comment[index].twoCommentVOList.splice(index1,1)
                }else{
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'error'
                    }); 
                }
                
            })
        },
        //删除一级评论
        Delete_Comment(id,index){
            var _this = this
            var comment = {
                id:id
            }
            PersonalCenterApi.SubmitDeleteComment(comment).then(res=>{
                this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success'
                }); 
                _this.comment.splice(index,1)
            })
        },
        //回复评论
        Reply_to_comments(item,index,item1){
            var _this = this
            this.$prompt('回复 '+item.name+':', '请输入回复内容', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                if(item1 == null){
                    var data = {
                        cid:item.id,
                        uid:_this.user.id,
                        vid:_this.video.id,
                        userId:0,
                        userComment:value,
                    }
                }else{
                    var data = {
                        cid:item.id,
                        uid:_this.user.id,
                        vid:_this.video.id,
                        userId:item1.uid,
                        userComment:value,
                    }
                }
                PersonalCenterApi.SubmitComment(data).then(res=>{
                    if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                        // 使用 this.$set 更新数组元素
                        this.$set(_this.comment, index, res.data.data);
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                })
            }).catch(() => {});
        },
        //发布评论
        Post_comments(){
            var _this = this
            if(_this.comment_input==''){
                this.$message({
                    showClose: true,
                    message: '请输入评论'
                });
            }else{
                var data = {
                    uid:_this.user.id,
                    vid:_this.video.id,
                    userComment:_this.comment_input,
                    cid:0,
                    userId:0,
                }
                PersonalCenterApi.SubmitComment(data).then(res=>{
                    if(res.data.code == 200){
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        }); 
                        _this.comment_input = ''
                        _this.comment = _this.comment.concat(res.data.data)
                    }else{
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        }); 
                    }
                })
            }
        },
        //展开更多(视频介绍)
        Expand_More_video(){
            document.getElementById('introduction').style.display='inline'
            this.expand1=true
        },
        //点击收藏
        usercollect() {
            var _this = this
            var data = {
                uid: _this.user.id,
                vid: _this.video.id,
            };
            if (_this.user_collect == false) {
                PersonalCenterApi.SubmitCollect(data).then(res => {
                    if (res.data.code == 200) {
                        _this.collect++
                    }
                    _this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'success'
                    });
                })
            } else {
                PersonalCenterApi.SubmitDeleteCollect(data).then(res => {
                    if (res.data.code == 200) {
                        _this.collect--
                    }
                    _this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'success'
                    });
                })
            }
            _this.user_collect = !_this.user_collect
        },
        //点赞或取消点赞
        userLike() {
            var _this = this
            var data = {
                uid: _this.user.id,
                vid: _this.video.id
            }
            PersonalCenterApi.SubmitLike(data).then(res => {
                _this.user_like = !_this.user_like
                if (_this.user_like == true) {
                    _this.like++
                } else {
                    _this.like--
                }
                _this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success'
                });
            })
        },
    },
    created() {
        var _this = this
        var video_id = _this.$route.query.id
        _this.video.id = video_id
        _this.user.id = sessionStorage.getItem('id')
        //获取用户信息
        UserManagementApi.SubmitUser().then(res => {
            _this.user = res.data.data
            PersonalCenterApi.SubmitLikeNotNull(res.data.data.id,video_id).then(res1 => {
                _this.user_like = res1.data.data
            })
            PersonalCenterApi.SubmitCollectNotNull(_this.user.id,video_id).then(res2 => {
                _this.user_collect = res2.data.data
            })
        })
        //获取视频信息
        VideoPlayApi.SubmitGetVideoById(video_id).then(res => {
            var v = res.data.data.records[0]
            _this.video = v
            //获取关注数粉丝数
            PersonalCenterApi.SubmitFollowCount(v.publisherId).then(res1 => {
                _this.follow = res1.data.data
            })
            PersonalCenterApi.SubmitFollowFansCount(v.publisherId).then(res1 => {
                _this.fans = res1.data.data
            })
            //查询用户是否关注up
            PersonalCenterApi.SubmitGetByUidFid(_this.user.id,v.publisherId).then(res2 => {
                _this.user_follow = res2.data.data
            })
            //根据视频类别推荐视频
            var videovo ={
                classification:_this.video.classification
            }
            VideoSearchApi.SubmitQueryAllClassifiedVideos(videovo,_this.page, 20).then(res => {
                if(res.data.data != null){
                    _this.recommend = _this.recommend.concat(res.data.data.records)
                }
            })
            //判断视频是否不是b站视频
            if(!_this.video.resource.startsWith('//player.bilibili.com/player.html')){
                _this.isvideo = true
            }else{
                _this.isvideo = false
            }
            
        })
        //获取收藏数点赞数
        VideoPlayApi.SubmitcountByVid(video_id).then(res => {
            _this.collect = res.data.data.collectCount
            _this.like = res.data.data.likeCount
        })
        
        //根据视频id获取评论
        var pageComment = {
            page:_this.page,
            pageSize:100,
            queryInfo:{
                vid:video_id
            }
        }
        PersonalCenterApi.SubmitGetComment(1, 20,pageComment).then(res => {
            if(res.data.data != null){
                _this.comment = _this.comment.concat(res.data.data.records)
            }
        })
        var history ={
            uid:_this.user.id,
            vid:video_id,
        }
        //生成历史记录
        PersonalCenterApi.SubmitHistory(history)
    }
};
</script>

<style scoped>
@import "../assets/css/iconfont.css";
@import '../assets/css/body1.css';

.video {
    height: 100%;
    width: 100%;
    background-image: url('../assets/image/视频播放背景.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.header {
    width: 100%;
    height: 50px;
}

.main {
    display: inline-block;
    width: 75%;
    padding: 1%;
    margin-left: 200px;
    background-color: aliceblue;
}

.resources {
    float: left;
    width: 65%;
}

.recommend {
    float: right;
    width: 32%;
}

.iconfont {
    font-family: "iconfont";
    font-size: 200%;
    cursor: pointer;
}

.icon {
    font-size: 200%;
    margin-left: 50px;
    cursor: pointer;
}

.i {
    font-size: 70%;
    margin-left: 10px;
}

.introduction {
    letter-spacing: 1px;
    font-family: "微软雅黑";
    height: 40px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* display: inline; */
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
}

.comment_user {
    width: 60px;
    padding-left: 10px;
    margin-top: 40px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.comment_text {
    width: 85%;
    display: inline-block;
    margin-top: 40px;
    padding-left: 10px;
    padding-top: 5px;
}
.drop-header{
    height: 120px;
    width: 350px;
    background-image: url('../assets/image/up背景.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.upname {
    font-size: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    cursor: pointer;
}
.drop-down{
    height: 280px;
    width: 350px;
}
div /deep/ .el-dropdown-menu,.el-popper{
    margin: 0px;
    padding: 0px;
}
.up-introduction{
    height: 35px;
    width: 250px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 80%;
    color: #909399;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
.recommendname {
    height: 40px;
    margin-bottom: 35px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
}</style>